<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>insight-iframe-component</title>
  <link rel="stylesheet" href="./static/ol.css" type="text/css">
  <script src="./static/ol.js" type="text/javascript"></script>
  <script src="http://wx.gisocn.com:11510/insight-open/js/jinsight@1.0.4.js" type="text/javascript"></script>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }

    .overButtons {
      position: absolute;
      right: 15px;
      top: 15px;
      background: rgba(0, 0, 0, .5);
      padding: 15px;
      border-radius: 8px;
      z-index: 1;
    }

    #map {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 0;
      background: #f8f8f8;
    }
  </style>
</head>

<body>
  <!--地图-->
  <div id="map"></div>
  <script>
    // 地图上点一个图斑，将
    // 组件控制地图，点表格某一行定位
    var map, features = [];
    const insight = new Insight()
    const layer = new ol.layer.Vector({
      title: 'add Layer',
      source: new ol.source.Vector({
        projection: 'EPSG:4326',
        url: "static/china.json",
        format: new ol.format.GeoJSON()
      })
    });
    function initMap() {
      map = new ol.Map({
        target: 'map',
        layers: [layer],
        view: new ol.View({
          center: [103.30976486206055, 36.029319763183594],
          zoom: 6,
          projection: 'EPSG:4326',
        })
      });
    }
    window.onload = () => {
      initMap()
      // 监听insight点击事件
      insight.on("name", value => {
        features.forEach(fearure => {
          if (fearure.get('name') == value) {
            const pointer = fearure.get("cp")
            pointer && map.getView().setCenter(pointer)
            pointer && map.getView().setZoom(8)
          }
        })
      })
      map.on('click', e => {
        let eventCoordinate = e.coordinate;
        if (map.hasFeatureAtPixel(e.pixel)) {
          var pixel = map.getEventPixel(e.originalEvent);
          map.forEachFeatureAtPixel(pixel, (feature) => {
            const province = feature.get('name')
            // 给insight发送状态变更
            insight.emit("province", province)
          })
        }
      })
      let flag = true
      layer.on('change', (evt) => {
        var source = evt.target.getSource();
        if (source.getState() === 'ready') {
          features = source.getFeatures()
          if (flag) {
            flag = false
            features.forEach(fearure => {
              fearure.setStyle(new ol.style.Style({
                text: new ol.style.Text({
                  text: fearure.get('name'),
                  font: '30px Calibri,sans-serif',
                  stroke: new ol.style.Stroke({
                    color: '#fff', width: 2
                  }),
                  textAlign: "center",
                }),
                stroke: new ol.style.Stroke({
                  borderColor: "#000",
                  borderWidth: 3,
                })
              }))
            })
          }
        }
      })
    }
  </script>
</body>

</html>